<template>
  <a-list item-layout="horizontal" :data-source="data">
    <template v-slot:renderItem="{ item, index }">
      <a-list-item>
        <a-list-item-meta>
          <template v-slot:title>
            <a href="https://www.antdv.com/">{{index}}. {{ item.title }}</a>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
const data = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
  {
    title: 'Ant Design Title 4',
  },
    {
    title: 'Ant Design Title 4',
  },
    {
    title: 'Ant Design Title 4',
  },  {
    title: 'Ant Design Title 4',
  },  {
    title: 'Ant Design Title 4',
  },

];
export default {
  data() {
    return {
      data,
    };
  },
};
</script>
<style></style>